<template>
	<view class="page">
		<view class="blankBox" v-if="bankCard.id" @click="$next(`/pages/withDrawal/bankCardList`)">
			<view class="blankBoxIcon">
				<img :src="$utils.imagePath(bankCard.bankDeposit.logo)" style="width: 100%;height: 100%;">
			</view>
			<view class="blankTile">
				<view class="blankTxt">
					{{bankCard.bankDeposit.name}}
				</view>
				<view class="weiHao">

					（尾号{{$utils.subStr(bankCard.cardNum,bankCard.cardNum.length-4,4)}}）

				</view>
			</view>
			<u-icon name="arrow-right" style="color: #666666;font-size: 28;"></u-icon>
		</view>
		<view class="tiXianItems">
			<view class="qian">
				￥
			</view>
			<view class="tiXianItemsRight">
				<u-input v-model="form.money" :type="type" :border="border" placeholder="最低提现500元" />
				<view class="aill" @click="tiXian">
					全部提现
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="add" @click="submit">
				确认提现
			</view>
			<view class="guiZe">
				提现规则
			</view>
			<view class="ze">
				<txe>1、默认将提现的佣金提到注册微信的零钱账户中;</txe>
				<txe>2、每个用户每月只能提现2次；</txe>
				<txe>3、每次提现至少提500元;</txe>
				<!-- <txe>4、提现手续费一般按提现金额的3%收取; </txe> -->
				<txe>4、提现一般3-5天内到账,如遇节假日提现时间会顺延; </txe>
				<txe>5、如遇提现失败,相应金额将返还至您的账户，您还可以再次发 起提现;</txe>
			</view>
		</view>
		<!-- 不满足提现的弹出层 -->
		<u-popup v-model="showNbm" mode="center" width="630rpx" height="434rpx" border-radius="12">
			<view class=""
				style="width: 630rpx;height: 434rpx;display: flex;flex-direction: column;justify-content: space-between;padding: 100rpx 0 48rpx;">
				<view class="modelTxt1">{{modelTip}}</view>
				<view class="knoew1" @click="know">
					知道了
				</view>
			</view>
		</u-popup>
		<!-- 满足提现的弹出层 -->
		<u-popup v-model="showWithdrawal" mode="center" width="630rpx" height="530rpx" border-radius="12">
			<view class="model">
				<view class="modelTxt2">提现金额</view>
				<view class="e">
					<view class="eLeft">
						￥
					</view>
					<view class="eRight">
						{{form.money}}
					</view>
				</view>
				<view class="wei">
					<!-- 截取了后4位 -->
					到账（尾号{{bankCard.cardNum == undefined ? '' : $utils.subStr(bankCard.cardNum,0,4) }}）
				</view>
				<view class="knoew2" @click="confirmTiXian">
					确认提现
				</view>
				<view class="weiTxt">
					1、每月只能提现2次；
					<br />
					2、每次提现至少500元。
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				modelTip: '',
				userinfo: {}, //提现金额的对象，临时变量
				showNbm: false,
				showWithdrawal: false,
				bankCard: {},
				// 提交数据
				form: {}
			}
		},

		mounted() {
			uni.$on('chooseBankCard', (res) => {
				this.bankCard = res
				this.form.bankCardId = res.id
			})
		},

		onLoad(e) {

			this.getBankCardRes()
		},
		onShow() {


		},
		onShow() {
			this.$axios.request(this.$api.getUser, "GET").then((val) => {
				this.userinfo = val.data
			})
		},
		methods: {
			getBankCardRes() {
				this.$axios.request(this.$api.getBankCardRes, "GET").then((val) => {
					if(val.data.list.length == 0){
						this.$msg.toastJump("请完善收款信息",`/pages/withDrawal/bankCardList`)
					}else{
						this.bankCard = val.data.list[0]
						this.form.bankCardId = val.data.list[0].id
					}
					
				})
			},
			// 不满足提现的弹出层方法 
			tiXian() {


				if (this.userinfo.money < 500) {
					this.showNbm = true
					this.modelTip = '亲，每次至少提现500元！当前余额不满足提现条件！'
					return
				}
				this.form.money = this.userinfo.money
				this.showWithdrawal = true

			},
			confirmTiXian() {
				this.$axios.request(this.$api.countFinanceCash, "GET").then((val) => {
					if (val.data.cashOutCount < 2) {
						this.$axios.request('/financeCash/cashOut', "POST", this.form).then((val) => {
							uni.$emit('reload', val)
							this.showWithdrawal = true
							this.$nextTick(() => {
								uni.navigateBack()
							})
						})
					} else {
						this.$msg.toast("亲，一个月只能提现2次哦！本月提现次数您已用完！")
					}
				})


			},
			know() {
				this.showNbm = false
			},
			submit() {
				// 如果用户啥也没有输入弹出层地金额地方就会出现 undefined
				if (this.form.money == undefined) {
					this.$msg.toast("请输入提现金额")
					return
				}
				if (this.form.money < 500) {
					this.$msg.toast("提现金额不小于500元")
					return
				} else {
					this.showWithdrawal = true
				}

			},
		}
	}
</script>

<style>
	.page {
		width: 100%;
		background-color: #F3F4F8;
		overflow-y: hidden;
	}

	.blankBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 98rpx;
		background-color: #fff;
		margin: 16rpx 0;
		padding: 0 32rpx;
	}

	.blankBoxIcon {
		width: 48rpx;
		height: 48rpx;
	}

	.blankTile {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 585rpx;
	}

	.blankTxt {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		color: #333333;
	}

	.weiHao {
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #62656D;
		margin-left: 8rpx;
	}

	.tiXianItems {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 116rpx;
		/* padding: 0 50rpx; */
		padding: 0 50rpx 0 30rpx;
		background-color: #fff;

	}

	.tiXianItemsRight {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 557rpx;

	}

	.xiaXian {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #BBBBBB;
	}

	.aill {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #3975EA;
	}

	.qian {
		font-size: 60rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 60rpx;
		color: #333333;
	}

	.showItem {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 100%;
		height: 116rpx;
		padding: 0 32rpx;
		background-color: #fff;
		margin-top: 4rpx;
	}

	.showItemTop,
	.showItemBum {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.showItemBum {
		margin-top: 16rpx;
	}

	.keTiXian {
		height: 33rpx;
		line-height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #333333;
	}

	.jinE {
		height: 33rpx;
		font-size: 24rpx;
		font-family: .PingFang SC;
		font-weight: 300;
		color: #3975EA;
		line-height: 38rpx;
	}

	.tip {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #BBBBBB;
	}

	.reason {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #FF2D55;
		margin-left: 16rpx;
	}

	.ServiceCharge {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 65rpx;
		margin-top: 4rpx;
		background-color: #fff;
	}

	.ServiceChargeTxt {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 33rpx;
		color: #333333;
	}

	.ServiceChargeEdu {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #333333;
	}

	.footer {
		width: 100%;
		height: 100%;
		background-color: #fff;
		margin-top: 16rpx;
		padding: 0 32rpx;
		overflow: hidden;
	}

	.add {
		height: 64rpx;
		border-radius: 4px;
		font-size: 28rpx;
		font-family: "PingFang SC";
		text-align: center;
		font-weight: 400;
		line-height: 64rpx;
		color: #FFFFFF;
		background-color: #3975EA;
		margin-top: 48rpx;
	}

	.guiZe {
		height: 40rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 40rpx;
		color: #333333;
		text-align: center;
		margin: 48rpx auto 20rpx;
	}

	.ze {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 36rpx;
		color: #333333;
	}

	.modelTxt1 {
		width: 353rpx;
		height: 88rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #333333;
		line-height: 48rpx;
		margin: 0 auto 0;
	}

	.knoew1 {
		height: 40px;
		font-size: 36rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		color: #3975EA;
		text-align: center;
	}

	.modelTxt2 {
		text-align: center;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #333333;
		margin: 48rpx 0 0;
	}

	.model {
		width: 630rpx;
		height: 530rpx;
		overflow: hidden;
	}

	.e {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin: 16rpx 0;
	}

	.eLeft {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #333333;
		margin-bottom: 9rpx;
	}

	.eRight {
		font-size: 48rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #333333;
	}

	.wei {
		text-align: center;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #333333;
		margin-left: 10rpx;
	}

	.knoew2 {
		text-align: center;
		line-height: 64rpx;
		width: 360rpx;
		height: 64rpx;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		color: #FFFFFF;
		background-color: #3975EA;
		border-radius: 4rpx;
		margin: 48rpx auto 48rpx;
	}

	.weiTxt {
		width: 252rpx;
		height: 68rpx;
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 40rpx;
		color: #3975EA;
		margin: 0 auto 0;
	}
</style>
